//1.-------------获取成绩并显示----------
axios.get('/score/list').then(result => {
    let { code, data } = result.data;
    if (code === 0) {
        let trs = '';
        //循环遍历  不断去拼接trs，
        for (let key in data) {
            //key就是对象的键，就是学员id
            trs += `<tr>
            <th scope="row">${key}</th>
            <td>${data[key].name}</td>
            <td class="score" data-id="${key}" data-batch="1">${data[key].score[0]}</td>
            <td class="score" data-id="${key}" data-batch="2">${data[key].score[1]}</td>
            <td class="score" data-id="${key}" data-batch="3">${data[key].score[2]}</td>
            <td class="score" data-id="${key}" data-batch="4">${data[key].score[3]}</td>
            <td class="score" data-id="${key}" data-batch="5">${data[key].score[4]}</td>
          </tr>`;
        }
        // 循环结束，把所有的tr放到tbody中
        $('tbody').html(trs);
    }
})

//2.-----------------------可编辑的表格效果------------------------
//思路：点击单元格，创建input，把input放进单元格中，这样就可以编辑了，
$('tbody').on('click', '.score', function() {
    //先把当前点击的单元格用变量表示，因为简单
    let td = $(this);
    //判断，如果td中有一个input了，就不要再创建了
    if (td.children().length > 0) return;
    //获取td中的分数
    let text = td.text();
    //清空td
    td.empty();
    //创建input
    let input = $(`<input type="text"/>`)
        //设置input、的value值
    input.val(text);
    //美化input
    input.css({
        height: '100%',
        width: '100%',
        background: td.css('background'),
        border: '0 none',
        outline: 'none',
        textAligen: 'center'
    });
    //把input放到td中
    input.appendTo(td); //td.input(input)
    //input获取焦点
    input.trigger('focus')
        //input失去焦点事件，表示取消录入,把原来单元格分数填回去即可
    input.on('blur', function() {
        td.text(text)
    });

    input.on('keyup', function(e) {
        //如果按下回车键，表示确认修改
        if (e.key === 'Enter') {
            //整理即将提交的数据
            let data = {
                    stu_id: $(this).parent().data('id'), //$(this)是input
                    batch: $(this).parent().data('batch'),
                    score: $(this).val(), //分数就是当前input的值
                }
                //调用接口，完成成绩的录入或者修改
            axios.post('/score/entry', data).then(result => {
                let { code, message } = result.data;
                if (code === 0) {
                    toastr.success(message); //修改成功的提示
                    td.text(data.score); //把新改的分数，放到td中
                }
            })
        }
    })
})